<template>
  <div class="XDC">
    <div class="XDC-title-box">
      <div class="XDC-title">
        <inTitle />
      </div>
      <div class="return">
        <span @click="goBack"></span>
      </div>
    </div>
    <div class="XDC-box">
      <div class="XDC-title">
        <div class="left-grid">
          <div>
            <span>{{tableHeader.dcdl}}</span>
            <span>{{tableHeader.dcdy}}</span>
            <span>{{tableHeader.dcwd}}</span>
            <span>{{tableHeader.hjwd}}</span>
            <span>监测时间</span>
          </div>
          <div>
            <span>{{tableTitle.dcdl}}</span>
            <span>{{tableTitle.dcdy}}</span>
            <span>{{tableTitle.dcwd}}</span>
            <span>{{tableTitle.hjwd}}</span>
            <span>{{tableTitle.dcdyJcsj}}</span>
          </div>
        </div>
        <div class="btn">
          <div class="first">
            <el-button type="button" :autofocus="true" @click="dyz">第一组蓄电池</el-button>
            <el-button type="button" @click="dez">第二组蓄电池</el-button>
          </div>
          <div class="first">
            <el-button type="button" @click="popxdc('1')">推送第一组蓄电池</el-button>
            <el-button type="button" @click="popxdc('2')">推送第二组蓄电池</el-button>
          </div>
        </div>
      </div>
      <div class="XDC-table">
        <containerTable :Table="Table"></containerTable>
      </div>
    </div>
    <el-dialog
      :title="'蓄电池检测记录'"
      :visible.sync="propXDCVisible"
      width="80%"
      :before-close="handleClose"
    >
      <propBtn v-if="propXDCVisible" @handleClose="handleClose" :flages="flages" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import inTitle from "@/views/OnlineMonitor/components/inTitle.vue";
import containerTable from "@/views/OnlineMonitor/modules/XDC/containerTable/containerTable.vue";

import { OnlineMonitorModule } from "@/store/modules/OnlineMonitor";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import propBtn from "./containerTable/propBtn.vue";
import { filter } from "vue/types/umd";
import { log } from "three";
@Component({
  components: { inTitle, containerTable, propBtn },
})
export default class XDC extends Vue {
  flage: any = "";
  flages: any = "";
  propXDCVisible: any = false;
  // 环境温度table 取#1 #2
  //返回按钮
  goBack() {
    this.$router.push("Home");
  }
  get stationId() {
    return OnlineMonitorModule.stationId;
  }
  get peonTable() {
    var staId: any = "";
    if (this.stationId) {
      staId = this.stationId;
    } else {
      staId = this.$route.query.code;
    }
    let xtInfo = GetSocketModule.getterAllAuxiliaryByStationId[staId] || [];
    console.log(xtInfo);

    let zxjc03 = [];
    if (xtInfo.length > 0) {
      xtInfo.map((k) => {
        if (k.xtValue === "10" && k.deviceType === "1002" && k.deviceId) {
          k.Myindex = k.id.slice(12, 17);
          // console.log(k);
          zxjc03.push(k);
        }
      });
    }
    var obj2 = {};
    let peon = zxjc03.reduce((cur, next) => {
      obj2[next.id] ? "" : (obj2[next.id] = true && cur.push(next));
      return cur;
    }, []);
    peon.sort((a, b) => a.Myindex - b.Myindex);

    return peon;
  }
  //表格数据
  Table = [];
  //表头
  tableHeader = {
    dcdl: "#1直流电源电池电流",
    dcdy: "#1直流电源电池电压",
    dcwd: "#1直流电源电池温度",
    hjwd: "#1直流电源环境温度",
  };
  tableTitle = {
    dcdl: "",
    dcdy: "",
    dcwd: "",
    hjwd: "",
    dcdyJcsj: "",
  };

  // public flage: any = "";

  //第一组按钮事件
  dyz() {
    this.Table = [];
    var title = [];
    this.peonTable.map((v) => {
      var str = v.name.includes("第1");
      var ti = v.name.includes("#1");
      if (str) {
        this.Table.push(v);
      }
      if (ti) {
        title.push(v);
      }
    });
    console.log(title);
    title.map((v) => {
      if (v.name == "#1直流电源电池电压") {
        this.tableTitle.dcdy = v.value + (v.unit || "");
        this.tableTitle.dcdyJcsj = v.time;
        this.tableHeader.dcdy = v.name;
      } else if (v.name == "#1直流电源电池电流") {
        this.tableTitle.dcdl = v.value + (v.unit || "");
        this.tableHeader.dcdl = v.name;
      } else if (v.name == "#1直流电源电池温度") {
        this.tableTitle.dcwd = v.value + (v.unit || "℃");
        this.tableHeader.dcwd = v.name;
      } else if (v.name == "#1直流电源环境温度") {
        this.tableTitle.hjwd = v.value + (v.unit || "");
        this.tableHeader.hjwd = v.name;
      }
    });
  }
  //第二组按钮事件
  dez() {
    this.Table = [];
    var title = [];
    this.peonTable.map((v) => {
      var str = v.name.includes("第2");
      var ti = v.name.includes("#2");
      if (str) {
        this.Table.push(v);
      }
      if (ti) {
        title.push(v);
      }
    });

    title.map((v) => {
      if (v.name == "#2直流电源电池电压") {
        this.tableTitle.dcdy = v.value + (v.unit || "");
        this.tableTitle.dcdyJcsj = v.time;
        this.tableHeader.dcdy = v.name;
      } else if (v.name == "#2直流电源电池电流") {
        this.tableTitle.dcdl = v.value + (v.unit || "");
        this.tableHeader.dcdl = v.name;
      } else if (v.name == "#2直流电源电池温度") {
        this.tableTitle.dcwd = v.value + (v.unit || "");
        this.tableHeader.dcwd = v.name;
      } else if (v.name == "#2直流电源环境温度") {
        this.tableTitle.hjwd = v.value + (v.unit || "");
        this.tableHeader.hjwd = v.name;
      }
    });
  }
  popxdc(val) {
    this.propXDCVisible = true;
    this.flages = val;
    // console.log(this.flages);
  }
  handleClose() {
    // console.log("handleClose");
    this.propXDCVisible = false;
  }
  mounted() {
    this.dyz();
  }
}
</script>
<style lang="scss" scoped>
.XDC {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .XDC-title-box {
    width: 100%;
    display: flex;
  }
  .XDC-title {
    width: calc(100% - 6.5rem);
  }
  .return {
    width: 6.5rem;
    height: 0.4rem;
    line-height: 0.38rem;
    padding-right: 0.18rem;
    text-align: right;
    > span {
      display: inline-block;
      width: 0.9rem;
      height: 0.3rem;
      background: url(../../../../assets/img/return.png) no-repeat;
      background-size: 100% 100%;
      vertical-align: middle;
      cursor: pointer;
    }
  }
  .XDC-box {
    width: 100%;
    height: calc(100% - 0.4rem);
    .XDC-title {
      width: 100%;
      height: 0.8rem;
      padding: 0 0.2rem;
      box-sizing: border-box;
      display: flex;
      .left-grid {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 0 0.5rem;
        // border: 1px solid #fff;
        border-top: 1px solid rgba(12, 175, 232, 0.3);
        border-left: 1px solid rgba(12, 175, 232, 0.3);
        > div {
          display: flex;
          height: 50%;
          // border: 1px solid #fff;

          span {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            // border: 1px solid #fff;\
            border-bottom: 1px solid rgba(12, 175, 232, 0.3);
            border-right: 1px solid rgba(12, 175, 232, 0.3);
          }
        }
        // .el-row {
        //   height: 50%;
        //   border: 1px solid #ffffff;
        //   .el-col {
        //     display: flex;
        //     justify-content: center;
        //     align-items: center;
        //     border: 1px solid #fff;

        //     span {
        //       width: 50%;
        //       text-align: center;
        //     }
        //   }
        // }
      }
      .btn {
        width: 4rem;
        height: 100%;
        display: flex;
        justify-content: space-around;
        justify-content: center;
        > div {
          width: 50%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }
      }
      .el-button + .el-button {
        margin-left: 0;
      }
      .first {
        .el-button {
          margin: 0.05rem 0;
          padding: 0.05rem 0.1rem;
        }
      }
    }
    .XDC-table {
      box-sizing: border-box;
      width: 100%;
      height: calc(100% - 0.8rem);
      padding-top: 0.1rem;
    }
  }
  // .xdcpull {
  //   overflow: auto;
  // }
}
</style>
